import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Card, Descriptions, Button, Tag, Avatar, Space, Spin, message } from 'antd';
import { ArrowLeftOutlined, EditOutlined } from '@ant-design/icons';
import { User } from '../../types';
import { api } from '../../services/api';

const UserProfile: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    loadUser();
  }, [id]);

  const loadUser = async () => {
    if (!id) return;
    
    setLoading(true);
    try {
      const users = await api.getUsers();
      const foundUser = users.find(u => u.id === parseInt(id));
      if (foundUser) {
        setUser(foundUser);
      } else {
        message.error('用户不存在');
        navigate('/user/list');
      }
    } catch (error) {
      message.error('加载用户信息失败');
    } finally {
      setLoading(false);
    }
  };

  const handleEdit = () => {
    navigate(`/user/edit/${id}`);
  };

  if (loading) {
    return (
      <div style={{ textAlign: 'center', padding: 50 }}>
        <Spin size="large" />
      </div>
    );
  }

  if (!user) {
    return <div>用户不存在</div>;
  }

  return (
    <div>
      <div style={{ marginBottom: 16 }}>
        <Button 
          type="text" 
          icon={<ArrowLeftOutlined />} 
          onClick={() => navigate('/user/list')}
        >
          返回用户列表
        </Button>
      </div>

      <Card
        title="用户详情"
        extra={
          <Button type="primary" icon={<EditOutlined />} onClick={handleEdit}>
            编辑
          </Button>
        }
      >
        <div style={{ textAlign: 'center', marginBottom: 24 }}>
          <Avatar size={80} src={user.avatar} />
          <h2 style={{ marginTop: 16, marginBottom: 8 }}>{user.username}</h2>
          <Space>
            <Tag color={user.role === 'admin' ? 'red' : 'blue'}>
              {user.role === 'admin' ? '管理员' : '普通用户'}
            </Tag>
            <Tag color={user.status === 'active' ? 'green' : 'red'}>
              {user.status === 'active' ? '激活' : '禁用'}
            </Tag>
          </Space>
        </div>

        <Descriptions bordered column={2}>
          <Descriptions.Item label="用户ID">{user.id}</Descriptions.Item>
          <Descriptions.Item label="用户名">{user.username}</Descriptions.Item>
          <Descriptions.Item label="邮箱" span={2}>{user.email}</Descriptions.Item>
          <Descriptions.Item label="角色">
            {user.role === 'admin' ? '管理员' : '普通用户'}
          </Descriptions.Item>
          <Descriptions.Item label="状态">
            <Tag color={user.status === 'active' ? 'green' : 'red'}>
              {user.status === 'active' ? '激活' : '禁用'}
            </Tag>
          </Descriptions.Item>
          <Descriptions.Item label="创建时间" span={2}>
            {user.createTime}
          </Descriptions.Item>
        </Descriptions>
      </Card>
    </div>
  );
};

export default UserProfile;